ol.control.LegendTool = function (options) {
    var element = $("<ul/>").addClass(options.className);

    var _title = $("<li/>").addClass("title").html("图例");
    element.append(_title);
    _title.on("click", function () {
        $(element.find(".layer")).toggle();
    });

    /**
     * 添加图层图例
     * @param legendData
     */
    this.addLegend = function (legendData) {
        var layerLi = $("<li/>").addClass("layer").attr("id", legendData.id);
        element.append(layerLi);
        var layerCheck = $("<input/>").attr("type", "checkbox")
            .data("attr", legendData).attr("checked", "checked");
        layerCheck.on("change", function () {
            var _legendData = $(this).data("attr");
            var _cheked = this.checked;
            var _layerLegend = $("#"+_legendData.id).find("ul.legends")[0];
            if(_legendData.layer) _legendData.layer.setVisible(_cheked);
            if(_cheked){
                $(_layerLegend).show();
            } else{
                $(_layerLegend).hide();
            }
        });
        var layerTitle = $("<h5/>").append(layerCheck).append(legendData.title);
        var layerUl = $("<ul/>").addClass("legends");
        for(var i=0,len=legendData.colors.length;i<len;i++){
            var color = legendData.colors[i];
            var _li = $("<li/>").append($("<span/>")
                .css("background-color", color.color))
                .append(color.label);
            layerUl.append(_li.addClass("legend"));
        }
        layerLi.append(layerTitle).append(layerUl);
    };

    ol.control.Control.call(this, {
        element: element[0],
        target: null
    });
};
ol.inherits(ol.control.LegendTool, ol.control.Control);